<template>
	<div class="page">
		<Head navTitle="发放记录" />
		<div class="page-container ">
			<div class="bs-panel ht-panel rewt-panel">
				<div class="ws-record-list">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
						<div class="ws-card flex-center" v-for="item in list" :key="item">
							<div class="flex_bd">
								<div class="title">代理返佣</div>
								<div class="time">2021-09-10 14:04:00</div>
							</div>
							<div class="ws-info">
								<div class="val">300.00</div>
								<div class="status text-green">发放成功</div>
							</div>
						</div>
					</van-list>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				dialogVisible: false,
				list: [],
				loading: false,
				finished: false,
			};
		},
		methods: {
			onLoad() {
				// 异步更新数据
				// setTimeout 仅做示例，真实场景中一般为 ajax 请求
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.list.push(this.list.length + 1);
					}

					// 加载状态结束
					this.loading = false;

					// 数据全部加载完成
					if (this.list.length >= 40) {
						this.finished = true;
					}
				}, 1000);
			},
		}
	}
</script>
